{# Form macros. Native inputs with ``name`` attributes, so every form posts
   or re-queries through htmx without client-side state.

       {% from "components/macros/form.html" import field, text_input, select, date_input, primary_button %}
#}


{%- set _primary_button_classes -%}
text-sm text-aegis-text border border-aegis-teal bg-aegis-teal/10 rounded px-4 py-2.5 hover:bg-aegis-teal/20 transition-colors disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center gap-2
{%- endset -%}


{# Inline primary button (no loading spinner). Defaults to ``type="button"``
   so it doesn't accidentally submit a form it's nested inside — pass
   ``type="submit"`` explicitly when you want submit semantics. ``attrs``
   lets the caller pass arbitrary attributes (Alpine ``@click``,
   ``:disabled``, ``aria-*``) without bloating the macro signature. #}
{% macro primary_button(label, type="button", attrs="") %}
<button type="{{ type }}" {{ attrs|safe }}
  class="{{ _primary_button_classes }}">{{ label }}</button>
{% endmacro %}


{# Primary submit button with an inline loading spinner. Parent scope must
   expose ``loading`` (bool) — typically flipped by ``@submit="loading = true"``
   on the form. The button disables itself while loading so a double-click
   can't double-submit. #}
{% macro submit_button(idle_label, loading_label) %}
<button type="submit" :disabled="loading"
  class="{{ _primary_button_classes }} w-full">
  <span x-show="!loading">{{ idle_label }}</span>
  <span x-show="loading" x-cloak class="inline-flex items-center gap-2">
    {# Tailwind's `animate-spin` + a minimal ring-quarter SVG. No deps. #}
    <svg class="animate-spin w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
    </svg>
    {{ loading_label }}
  </span>
</button>
{% endmacro %}


{# Shared input styling; every control below uses it so the bar reads as one. #}
{%- set _control_classes -%}
bg-aegis-bg border border-aegis-border rounded px-2.5 py-1.5 text-sm text-aegis-text placeholder:text-aegis-muted/50 focus:border-aegis-teal focus:outline-none transition-colors
{%- endset -%}


{# A native select. ``options`` are objects or dicts with ``id`` and
   ``name``; ``blank`` is the "no filter" label (``None`` for no blank
   choice); ``selected`` the current id. ``label`` wraps it inline for a
   filter bar; ``block`` lays it out full-width inside a ``field()``. #}
{% macro select(name, options, selected=None, blank="All", label=None, block=False) %}
{% if label %}<label class="inline-flex items-center gap-2 text-xs text-aegis-muted"><span>{{ label }}</span>{% endif %}
<select name="{{ name }}" class="{{ _control_classes }}{% if block %} block w-full mt-1{% endif %}">
  {% if blank is not none %}<option value="">{{ blank }}</option>{% endif %}
  {% for option in options %}
  {% set oid = option["id"] if option is mapping else option.id %}
  {% set oname = option["name"] if option is mapping else option.name %}
  <option value="{{ oid }}" {% if selected is not none and oid == selected %}selected{% endif %}>{{ oname }}</option>
  {% endfor %}
</select>
{% if label %}</label>{% endif %}
{% endmacro %}

{% macro date_input(name, value=None, label=None, block=False) %}
{% if label %}<label class="inline-flex items-center gap-2 text-xs text-aegis-muted"><span>{{ label }}</span>{% endif %}
<input type="date" name="{{ name }}" {% if value %}value="{{ value.isoformat() if value.isoformat is defined else value }}"{% endif %} class="{{ _control_classes }}{% if block %} block w-full mt-1{% endif %}">
{% if label %}</label>{% endif %}
{% endmacro %}

{% macro checkbox(name, checked=False, label=None) %}
<label class="inline-flex items-center gap-2 text-xs text-aegis-muted cursor-pointer">
  <input type="checkbox" name="{{ name }}" {% if checked %}checked{% endif %} class="accent-aegis-teal">
  {% if label %}<span>{{ label }}</span>{% endif %}
</label>
{% endmacro %}

{% macro search_input(name, value=None, placeholder="Search") %}
<input type="search" name="{{ name }}" value="{{ value or '' }}" placeholder="{{ placeholder }}"
       aria-label="{{ placeholder }}" class="{{ _control_classes }} min-w-[12rem]">
{% endmacro %}

{# A labelled field. The control comes via {% call %}; ``error`` renders
   under it (pattern 1's 422 re-render passes field errors here). #}
{% macro field(label, error=None) %}
<div class="space-y-1">
  <label class="block text-xxs text-aegis-muted uppercase tracking-wider">{{ label }}
    {{ caller() }}
  </label>
  {% if error %}<p class="text-xs text-error">{{ error }}</p>{% endif %}
</div>
{% endmacro %}

{% macro text_input(name, value=None, placeholder="", required=False, autofocus=False) %}
<input type="text" name="{{ name }}" value="{{ value or '' }}" placeholder="{{ placeholder }}"
       {% if required %}required{% endif %} {% if autofocus %}autofocus{% endif %}
       class="{{ _control_classes }} w-full mt-1">
{% endmacro %}

{% macro money_input(name, value=None, placeholder="0.00") %}
<div class="relative mt-1">
  <span class="absolute inset-y-0 left-2.5 flex items-center text-sm text-aegis-muted" aria-hidden="true">$</span>
  <input type="text" inputmode="decimal" name="{{ name }}" value="{{ value or '' }}" placeholder="{{ placeholder }}"
         class="{{ _control_classes }} w-full pl-6 tabular-nums">
</div>
{% endmacro %}

{% macro textarea(name, value=None, rows=6, placeholder="") %}
<textarea name="{{ name }}" rows="{{ rows }}" placeholder="{{ placeholder }}"
          class="{{ _control_classes }} w-full mt-1 font-mono text-xs">{{ value or "" }}</textarea>
{% endmacro %}


{# Themed combobox — replaces native <select> so the dropdown panel matches
   the dark UI instead of falling back to the OS-themed picker. Alpine
   handles open/close + click-outside + escape. Caller supplies:
   - `model`:        Alpine path to bind to (e.g. `form.metric_key`)
   - `options`:      Alpine expression returning an array of option objects
   - `value_attr`:   key on each option holding the bound value
   - `label_attr`:   key on each option holding the display label
   - `on_change`:    optional Alpine expression to run after selection
   - `placeholder`:  shown when no option matches the current model value
   - `small`:        tighter padding for inline filter chips

   ``grouped=true`` renders category headers: ``options`` is then a list of
   ``{label, items: [{value, label}]}`` groups (an empty group label means
   no header, useful to pin an "All" entry at the top). ``panel_class``
   widens the dropdown beyond the trigger (e.g. ``min-w-[13rem]``) so long
   labels don't wrap. #}
{% macro select_field(model, options, value_attr="value", label_attr="label", on_change="", placeholder="Select…", small=false, grouped=false, panel_class="") %}
<div x-data="{ open: false }" class="relative"
     @click.outside="open = false"
     @keydown.escape.window="open = false">
  <button type="button" @click="open = !open"
    class="w-full bg-aegis-bg border rounded {{ 'px-2 py-1 text-xxs' if small else 'px-3 py-2 text-sm' }} text-aegis-text text-left flex items-center justify-between gap-2 hover:border-aegis-muted focus:outline-none transition-colors"
    :class="open ? 'border-aegis-teal' : 'border-aegis-border'">
    {% if grouped %}
    <span class="truncate"
          x-text="(({{ options }}).flatMap(_g => _g.items).find(_o => _o.{{ value_attr }} === {{ model }}) || {}).{{ label_attr }} || '{{ placeholder }}'"></span>
    {% else %}
    <span class="truncate"
          x-text="(({{ options }}).find(_o => _o.{{ value_attr }} === {{ model }}) || {}).{{ label_attr }} || '{{ placeholder }}'"></span>
    {% endif %}
    <svg class="w-3 h-3 shrink-0 text-aegis-muted transition-transform"
         :class="open ? 'rotate-180' : ''"
         fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
    </svg>
  </button>
  <div x-show="open" x-cloak x-transition.opacity
       class="absolute left-0 top-full mt-1 z-30 bg-aegis-card border border-aegis-border rounded-lg shadow-lg py-1 max-h-80 overflow-y-auto {{ panel_class if panel_class else 'right-0' }}">
    {% if grouped %}
    <template x-for="_grp in {{ options }}" :key="_grp.label">
      <div>
        <div x-show="_grp.label"
             class="px-2 pt-2 pb-0.5 text-xxs uppercase tracking-wider text-aegis-muted/60"
             x-text="_grp.label"></div>
        <template x-for="_opt in _grp.items" :key="_opt.{{ value_attr }}">
          <button type="button"
            class="w-full text-left whitespace-nowrap {{ 'px-2 py-1 text-xxs' if small else 'px-3 py-1.5 text-sm' }} hover:bg-aegis-border/30 transition-colors"
            :class="{{ model }} === _opt.{{ value_attr }} ? 'text-aegis-teal' : 'text-aegis-text'"
            @click="{{ model }} = _opt.{{ value_attr }}; open = false; {{ on_change }}"
            x-text="_opt.{{ label_attr }}"></button>
        </template>
      </div>
    </template>
    {% else %}
    <template x-for="_opt in {{ options }}" :key="_opt.{{ value_attr }}">
      <button type="button"
        class="w-full text-left {{ 'px-2 py-1 text-xxs' if small else 'px-3 py-1.5 text-sm' }} hover:bg-aegis-border/30 transition-colors"
        :class="{{ model }} === _opt.{{ value_attr }} ? 'text-aegis-teal' : 'text-aegis-text'"
        @click="{{ model }} = _opt.{{ value_attr }}; open = false; {{ on_change }}"
        x-text="_opt.{{ label_attr }}"></button>
    </template>
    {% endif %}
  </div>
</div>
{% endmacro %}


{# Password input with a show/hide eye toggle. Standalone so callers can
   wire it up with either ``name=`` (plain form post) or Alpine
   ``x_model`` bindings.

   The toggle swaps the rendered ``type`` via ``:type`` so browser password
   managers still recognize the field as a password — Alpine's ``:type``
   takes effect after the initial parse, so autofill works.

   ``bg_class`` lets callers match the surrounding surface. #}
{% macro password_input(name=None, x_model=None, autocomplete=None, required=True, minlength=None, placeholder="", bg_class="bg-aegis-card") %}
<div class="relative" x-data="{ shown: false }">
  <input :type="shown ? 'text' : 'password'"
    {% if name %}name="{{ name }}"{% endif %}
    {% if x_model %}x-model="{{ x_model }}"{% endif %}
    {% if required %}required{% endif %}
    {% if autocomplete %}autocomplete="{{ autocomplete }}"{% endif %}
    {% if minlength %}minlength="{{ minlength }}"{% endif %}
    class="w-full {{ bg_class }} border border-aegis-border rounded pl-3 pr-10 py-2 text-sm text-aegis-text placeholder:text-aegis-muted/40 focus:border-aegis-teal focus:outline-none transition-colors"
    placeholder="{{ placeholder }}">
  <button type="button" @click="shown = !shown"
    :aria-label="shown ? 'Hide password' : 'Show password'"
    class="absolute inset-y-0 right-0 px-3 flex items-center text-aegis-muted hover:text-aegis-text transition-colors">
    {# Eye / eye-slash from heroicons. Both 24×24 outline. Alpine swaps
       which is visible. #}
    <svg x-show="!shown" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
      <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/>
      <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
    </svg>
    <svg x-show="shown" x-cloak xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
      <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.243 4.243L9.88 9.88"/>
    </svg>
  </button>
</div>
{% endmacro %}


{# "OR" divider with hairlines — sits between a form and an alternate
   action (e.g. email/password above, OAuth buttons below). #}
{% macro or_divider() %}
<div class="flex items-center gap-3 my-5">
  <div class="flex-1 h-px bg-aegis-border/60"></div>
  <span class="text-xxs text-aegis-muted/70 uppercase tracking-wider">or</span>
  <div class="flex-1 h-px bg-aegis-border/60"></div>
</div>
{% endmacro %}


{# The time-window chips: a row of exclusive pills that submits as one
   radio field, so a click re-requests the enclosing form. Same recipe as
   ``layout.chip``, driven by ``peer-checked`` because a radio rather than
   a link marks the choice. #}
{% macro range_chips(ranges, days, field="days", aria="Time window") %}
<fieldset class="flex flex-wrap items-center gap-1.5" aria-label="{{ aria }}">
  {% for value, label in ranges %}
  <label class="cursor-pointer">
    <input type="radio" name="{{ field }}" value="{{ value }}" class="sr-only peer" {% if value == days %}checked{% endif %}>
    <span class="inline-block text-xs px-2 py-0.5 rounded border border-aegis-border text-aegis-muted
                 peer-checked:border-aegis-teal peer-checked:text-aegis-text peer-checked:bg-aegis-teal/10 peer-checked:font-semibold
                 peer-focus-visible:ring-2 peer-focus-visible:ring-aegis-teal hover:border-aegis-muted hover:text-aegis-text transition-colors">{{ label }}</span>
  </label>
  {% endfor %}
</fieldset>
{% endmacro %}


{# A small action button (row verbs, card verbs, toolbar). ``attrs`` is
   the htmx verb; ``vals`` a dict for ``hx-vals``; ``tone`` is default
   (quiet), primary (teal), danger or warn. The one recipe every compact
   button uses. #}
{% macro action(label, attrs, tone="default", vals=None) %}
{% set tones = {"default": "border-aegis-border text-aegis-muted hover:text-aegis-text hover:border-aegis-muted", "primary": "border-aegis-teal text-aegis-text hover:bg-aegis-teal/10", "danger": "border-aegis-error/40 text-error hover:border-aegis-error", "warn": "border-aegis-amber/40 text-aegis-text hover:border-aegis-amber"} %}
<button type="button" {{ attrs|safe }} {% if vals is not none %}hx-vals='{{ vals|tojson }}'{% endif %} class="px-2.5 py-1 text-xs rounded border whitespace-nowrap transition-colors {{ tones.get(tone, tones['default']) }}">{{ label }}</button>
{% endmacro %}